/* Phase 6 蓝紫数据风主题 — 1080x1920 */
:root {
  --bg: #0a0e1f;
  --bg2: #101531;
  --card: #161c3d;
  --border: rgba(124, 92, 255, 0.35);
  --purple: #7c5cff;
  --purple-lt: #a78bfa;
  --cyan: #22d3ee;
  --text: #eef0ff;
  --dim: #8b93c0;
  --gold: #fbbf24;
  --red: #f87171;
  --font: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1920px; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 30%, #141a45 0%, var(--bg) 55%, #06080f 100%);
  color: var(--text);
  font-family: var(--font);
  position: relative;
}
.grid-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(124,92,255,0.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(124,92,255,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 6s linear infinite;
}
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 60px; } }
.center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.card {
  background: linear-gradient(160deg, rgba(22,28,61,0.95), rgba(16,21,49,0.9));
  border: 2px solid var(--border);
  border-radius: 28px;
  padding: 36px 44px;
  box-shadow: 0 20px 60px rgba(124,92,255,0.25), inset 0 1px 0 rgba(167,139,250,0.2);
}
.big { font-size: 110px; font-weight: 800; letter-spacing: 2px; }
.mid { font-size: 72px; font-weight: 700; }
.small { font-size: 44px; font-weight: 500; color: var(--dim); }
.title { font-size: 130px; font-weight: 900; line-height: 1.25; }
.purple { color: var(--purple-lt); }
.cyan { color: var(--cyan); }
.gold { color: var(--gold); }
.red { color: var(--red); }
.pop { animation: pop 0.5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.slide-up { animation: slideUp 0.55s cubic-bezier(.2,1,.3,1) both; }
@keyframes slideUp { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: translateY(0); } }
.fade { animation: fade 0.6s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.shake { animation: shake .5s ease both; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-14px)} 75%{transform:translateX(14px)} }
.tag {
  display: inline-block; padding: 10px 26px; border-radius: 999px;
  background: rgba(124,92,255,.15); border: 2px solid rgba(124,92,255,.5);
  color: var(--purple-lt); font-size: 34px; font-weight: 600; margin: 10px;
}
.bar {
  position: absolute; left: 0; bottom: 0; height: 10px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  animation: barGrow 6s linear both;
}
@keyframes barGrow { from { width: 0; } to { width: 100%; } }